ExtJS Window এবং Dialog Boxes

ExtJS Windows এবং Dialog Boxes হল ExtJS এর গুরুত্বপূর্ণ UI উপাদান, যা ব্যবহারকারীদের জন্য ইনপুট বা সতর্কতা বার্তা প্রদর্শন করতে ব্যবহৃত হয়। এগুলি সাধারণত প্রাথমিক ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য ডায়নামিক পপ-আপ উইন্ডো হিসেবে কাজ করে, যেমন ফর্ম সাবমিশন, তথ্য সতর্কতা, অথবা কনফার্মেশন ডায়ালগ।

১. ExtJS Window

Window কম্পোনেন্ট ExtJS-এ একটি নতুন উইন্ডো বা পপ-আপ তৈরি করতে ব্যবহৃত হয়, যা ব্যবহারকারীর ইন্টারঅ্যাকশনের জন্য একটি নতুন প্যানেল প্রদান করে। এটি সাধারণত একটি ডায়লগ বা পপ-আপ উইন্ডো হিসাবে ব্যবহৃত হয় এবং আপনি এর আকার, শিরোনাম, আইকন, বডি কন্টেন্ট এবং অন্যান্য কনফিগারেশন কাস্টমাইজ করতে পারেন।

Window উদাহরণ:

Ext.create('Ext.window.Window', {
    title: 'My Window',      // উইন্ডোর শিরোনাম
    width: 300,              // উইন্ডোর প্রস্থ
    height: 200,             // উইন্ডোর উচ্চতা
    layout: 'fit',           // উইন্ডোর লেআউট
    items: [{
        xtype: 'panel',
        html: 'This is a simple window'
    }],
    modal: true,              // মডাল উইন্ডো (ব্যবহারকারী অন্যান্য UI উপাদানগুলির সাথে ইন্টারঅ্যাক্ট করতে পারবেন না)
    closable: true,          // উইন্ডো বন্ধ করা যাবে
    draggable: true,         // উইন্ডো টেনে নিয়ে যাওয়া যাবে
    resizable: true,         // উইন্ডো আকার পরিবর্তন করা যাবে
    renderTo: Ext.getBody(), // উইন্ডো রেন্ডার হবে
    listeners: {
        close: function() {
            console.log('Window Closed');
        }
    }
}).show();

ব্যাখ্যা:

• title: উইন্ডোর শিরোনাম।
• width / height: উইন্ডোর আকার।
• layout: 'fit': ভিতরের কম্পোনেন্টের জন্য লেআউট।
• modal: true: মডাল উইন্ডো (এটি টপ-লেভেল ইন্টারঅ্যাকশন রোধ করে)।
• closable: true: উইন্ডোর বন্ধ করার বাটন।
• draggable: true: উইন্ডোকে টেনে নিয়ে যাওয়া যাবে।
• resizable: true: উইন্ডো আকার পরিবর্তন করা যাবে।

২. Dialog Boxes

Dialog Boxes হল একটি বিশেষ ধরনের উইন্ডো যা সাধারণত ইনপুট বা তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়। Dialog Boxes সাধারণত Alert, Confirm, বা Prompt টাইপের হয়ে থাকে এবং ব্যবহারকারীর প্রতিক্রিয়া (OK, Cancel ইত্যাদি) পাওয়ার জন্য ব্যবহৃত হয়।

Dialog Box উদাহরণ:

(i) Alert Dialog

Alert Dialog সাধারণত একটি সতর্কবার্তা প্রদর্শনের জন্য ব্যবহৃত হয়।

Ext.Msg.alert('Alert', 'This is an alert message');

এখানে, Ext.Msg.alert() মেথড ব্যবহার করে একটি সতর্কবার্তা (alert) ডায়লগ তৈরি করা হয়েছে। Alert হল ডায়লগের শিরোনাম এবং This is an alert message হল ডায়লগের কন্টেন্ট।

(ii) Confirm Dialog

Confirm Dialog ব্যবহারকারী থেকে কনফার্মেশন নেওয়ার জন্য ব্যবহৃত হয়। এটি দুইটি বাটন (OK এবং Cancel) সহ থাকে।

Ext.Msg.confirm('Confirm', 'Are you sure you want to delete this item?', function(btn) {
    if (btn === 'yes') {
        console.log('Item Deleted');
    } else {
        console.log('Action Cancelled');
    }
});

এখানে:

• Ext.Msg.confirm() মেথড ব্যবহার করে একটি কনফার্মেশন ডায়লগ তৈরি করা হয়েছে।
• btn হল বাটনের মান (যেমন, yes বা no), যা ব্যবহারকারী ক্লিক করার পর ফাংশনে পাঠানো হয়।

(iii) Prompt Dialog

Prompt Dialog ব্যবহারকারীর কাছ থেকে ইনপুট সংগ্রহ করার জন্য ব্যবহৃত হয়। এটি একটি টেক্সট ইনপুট ফিল্ড সহ ডায়লগ প্রদান করে।

Ext.Msg.prompt('Name Input', 'Please enter your name:', function(btn, text) {
    if (btn === 'ok') {
        console.log('Hello, ' + text);
    }
});

এখানে:

• Ext.Msg.prompt() মেথড ব্যবহার করে একটি ইনপুট ডায়লগ তৈরি করা হয়েছে, যা ব্যবহারকারীর কাছ থেকে নাম গ্রহণ করে।

৩. Window এবং Dialog Box এর মধ্যে পার্থক্য

৪. Window এবং Dialog Boxes এর কাস্টমাইজেশন

Window কাস্টমাইজেশন উদাহরণ:

Ext.create('Ext.window.Window', {
    title: 'Custom Window',
    width: 400,
    height: 300,
    modal: true,
    resizable: false,
    layout: 'fit',
    items: [{
        xtype: 'panel',
        html: 'This is a custom window!'
    }],
    tools: [{
        type: 'refresh',
        handler: function() {
            console.log('Window refreshed!');
        }
    }],
    renderTo: Ext.getBody()
}).show();

Dialog Box কাস্টমাইজেশন উদাহরণ:

Ext.Msg.show({
    title: 'Custom Message',
    message: 'Do you want to proceed?',
    buttons: Ext.Msg.YESNO,
    icon: Ext.Msg.QUESTION,
    fn: function(btn) {
        if (btn === 'yes') {
            console.log('Proceeding...');
        } else {
            console.log('Cancelled.');
        }
    }
});

সারাংশ

1. ExtJS Window: একটি পপ-আপ উইন্ডো যা সাধারণত ডায়ালগ, ফর্ম, বা অন্যান্য UI উপাদান ধারণ করতে ব্যবহৃত হয়।
2. Dialog Boxes: সতর্কতা বার্তা, ইনপুট সংগ্রহ, বা কনফার্মেশন ডায়লগের জন্য ব্যবহৃত হয়। এর মধ্যে alert, confirm, এবং prompt ডায়লগ অন্তর্ভুক্ত।
3. Customizability: আপনি উইন্ডো এবং ডায়লগ বক্স কাস্টমাইজ করতে পারেন যেমন, টাইটেল, বাটন, কন্টেন্ট, এবং ইন্টারঅ্যাকশন ফাংশন।

এই উপাদানগুলি ExtJS অ্যাপ্লিকেশনের ইন্টারঅ্যাকটিভ ফাংশনালিটিজ তৈরি করার জন্য খুবই গুরুত্বপূর্ণ।

ExtJS Window Component একটি মডাল বা নন-মডাল পপআপ উইন্ডো তৈরি করতে ব্যবহৃত হয়, যা সাধারণত ইউজারের ইনপুট বা সেলফ কনটেইনড ভিউ প্রদর্শনের জন্য ব্যবহার করা হয়। এটি একটি বিশেষ ধরনের প্যানেল যা ইউজারের একশন অনুযায়ী খুলতে বা বন্ধ হতে পারে। ExtJS-এ উইন্ডো তৈরি করা খুব সহজ এবং এটি অনেক কাস্টমাইজেশন অপশন প্রদান করে।

এই গাইডে, আমরা দেখব কিভাবে Window Component তৈরি করা যায় এবং এটি কিভাবে ব্যবহার করা হয়।

১. Window Component তৈরি করা

Window Component তৈরি করতে Ext.window.Window ক্লাস ব্যবহার করা হয়। উইন্ডোতে সাধারণত একটি শিরোনাম, কন্টেন্ট (যেমন ফর্ম, গ্রিড, টেক্সট), এবং এক বা একাধিক বাটন থাকে। উইন্ডোটি সাধারণত modal হতে পারে, যেখানে ইউজারকে শুধুমাত্র উইন্ডোর ভিতরে থাকা অপশনগুলির মধ্য থেকে নির্বাচন করতে দেয়।

Window Component উদাহরণ

Ext.create('Ext.window.Window', {
    title: 'My Window',
    width: 400,
    height: 300,
    layout: 'fit', // উইন্ডোর ভিতরে কনটেন্ট ফিট করবে
    modal: true, // এটি একটি মডাল উইন্ডো হবে
    items: [{
        xtype: 'panel', // উইন্ডোর ভিতরে একটি প্যানেল
        html: 'Welcome to the ExtJS Window Component!'
    }],
    buttons: [
        {
            text: 'OK',
            handler: function() {
                console.log('OK Button Clicked');
                this.up('window').close(); // উইন্ডো বন্ধ করা
            }
        },
        {
            text: 'Cancel',
            handler: function() {
                console.log('Cancel Button Clicked');
                this.up('window').close(); // উইন্ডো বন্ধ করা
            }
        }
    ]
}).show(); // উইন্ডোটি প্রদর্শন করবে

ব্যাখ্যা:

• title: উইন্ডোর শিরোনাম।
• width এবং height: উইন্ডোর আকার।
• layout: 'fit': উইন্ডোর ভিতরের কনটেন্ট সম্পূর্ণ উইন্ডোতে ফিট করবে।
• modal: true: এটি একটি মডাল উইন্ডো হবে, যা ইউজারকে অন্য উইন্ডো বা কন্টেন্টে কাজ করতে দেবে না যতক্ষণ না উইন্ডোটি বন্ধ না করা হয়।
• items: উইন্ডোর ভিতরে কম্পোনেন্ট যোগ করা হয়েছে (এখানে একটি প্যানেল)।
• buttons: উইন্ডোর নিচে দুটি বাটন, OK এবং Cancel। বাটনগুলোর handler ফাংশন উইন্ডোটি বন্ধ করবে।

২. Dynamic Window (ডাইনামিক উইন্ডো)

Dynamic Windows তৈরি করা যায় যেখানে উইন্ডোটি কোন ইভেন্টের মাধ্যমে খোলা বা বন্ধ করা হয়। এটি সাধারণত ইউজারের ইন্টারঅ্যাকশন থেকে নির্ধারিত হয়।

উদাহরণ: বাটন ক্লিক করে উইন্ডো খোলা

Ext.create('Ext.button.Button', {
    text: 'Open Window',
    renderTo: Ext.getBody(),
    handler: function() {
        Ext.create('Ext.window.Window', {
            title: 'Dynamic Window',
            width: 400,
            height: 200,
            layout: 'fit',
            modal: true,
            items: [{
                xtype: 'panel',
                html: 'This window was opened dynamically by clicking the button.'
            }],
            buttons: [{
                text: 'Close',
                handler: function() {
                    this.up('window').close();
                }
            }]
        }).show();
    }
});

এখানে, যখন ইউজার Open Window বাটনে ক্লিক করবে, তখন একটি নতুন উইন্ডো খোলা হবে, যা modal এবং fit লেআউট ব্যবহার করে।

৩. Resizable এবং Draggable Window

ExtJS উইন্ডো কম্পোনেন্টটি resizable এবং draggable (এটি ড্র্যাগ করে টেনে আনা যেতে পারে) হতে পারে। আপনি resizable এবং draggable কনফিগারেশন ব্যবহার করে উইন্ডোর এই আচরণগুলি কাস্টমাইজ করতে পারেন।

উদাহরণ: Resizable এবং Draggable উইন্ডো

Ext.create('Ext.window.Window', {
    title: 'Resizable and Draggable Window',
    width: 400,
    height: 300,
    layout: 'fit',
    resizable: true, // উইন্ডো রিসাইজ করা যাবে
    draggable: true, // উইন্ডো ড্র্যাগ করা যাবে
    modal: true,
    items: [{
        xtype: 'panel',
        html: 'This window can be resized and dragged around.'
    }],
    buttons: [{
        text: 'Close',
        handler: function() {
            this.up('window').close();
        }
    }]
}).show();

এখানে, resizable: true এবং draggable: true কনফিগারেশন ব্যবহার করা হয়েছে, যার ফলে উইন্ডোটি রিসাইজ এবং ড্র্যাগ করা যাবে।

৪. Window with Form

ফর্ম কম্পোনেন্ট ব্যবহার করে উইন্ডোতে ডেটা ইনপুট ফিচার যোগ করা যেতে পারে, যেমন ব্যবহারকারীর নাম, ইমেল ইত্যাদি। উইন্ডোতে ফর্ম উপাদানগুলি রাখার জন্য Ext.form.Panel ব্যবহার করা হয়।

উদাহরণ: Window with Form

Ext.create('Ext.window.Window', {
    title: 'User Form',
    width: 400,
    height: 250,
    layout: 'fit',
    modal: true,
    items: [{
        xtype: 'form',
        bodyPadding: 10,
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Name',
            name: 'name',
            allowBlank: false
        }, {
            xtype: 'textfield',
            fieldLabel: 'Email',
            name: 'email',
            vtype: 'email',
            allowBlank: false
        }],
        buttons: [{
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    console.log('Form Submitted:', form.getValues());
                    form.reset();
                }
            }
        }]
    }]
}).show();

এখানে:

• xtype: 'form' ব্যবহার করা হয়েছে উইন্ডোর ভিতরে একটি ফর্ম তৈরি করার জন্য।
• textfield ব্যবহার করে নাম এবং ইমেইল ইনপুট ফিল্ড তৈরি করা হয়েছে।
• vtype: 'email' ব্যবহার করা হয়েছে ইমেইল ভ্যালিডেশনের জন্য।

৫. Window Events

ExtJS উইন্ডোতে বিভিন্ন events (ইভেন্ট) যুক্ত করা যায়, যেমন উইন্ডো খুললে, বন্ধ হলে, এবং লোড হওয়ার সময়। এই ইভেন্টগুলি ব্যবহার করে উইন্ডোর আচরণ কাস্টমাইজ করা যায়।

উদাহরণ: Window Events

Ext.create('Ext.window.Window', {
    title: 'Window Events Example',
    width: 400,
    height: 300,
    modal: true,
    items: [{
        xtype: 'panel',
        html: 'Click outside the window to close it.'
    }],
    listeners: {
        show: function() {
            console.log('Window is shown');
        },
        close: function() {
            console.log('Window is closed');
        }
    }
}).show();

এখানে, show এবং close ইভেন্ট ব্যবহার করা হয়েছে উইন্ডোটি প্রদর্শিত হওয়ার এবং বন্ধ হওয়ার সময় একটি কাস্টম ফাংশন কল করতে।

সারাংশ

• Window Component একটি ExtJS কম্পোনেন্ট যা পপআপ উইন্ডো তৈরি করতে ব্যবহৃত হয়।
• এটি modal বা non-modal হতে পারে, এবং এতে collapsible, resizable, এবং draggable কনফিগারেশন থাকে।
• উইন্ডোতে সাধারণত form বা panel থাকে, এবং আপনি buttons এবং listeners ব্যবহার করে ইন্টারঅ্যাকশনের সুযোগ দিতে পারেন।
• উইন্ডো তৈরি করার জন্য Ext.window.Window ক্লাস ব্যবহৃত হয়, যা কাস্টমাইজড কনটেন্ট এবং কন্ট্রোল প্রদান করে।

ExtJS উইন্ডো কম্পোনেন্ট ব্যবহার করে আপনি ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব পপআপ উইন্ডো তৈরি করতে পারবেন।

Modal Dialog এবং Confirmation Boxes ব্যবহারকারীদের সঙ্গে ইন্টারঅ্যাকশন করার জন্য গুরুত্বপূর্ণ ইউজার ইন্টারফেস উপাদান। ExtJS এ এগুলি খুব সহজে তৈরি করা যায়। Modal Dialog ব্যবহারকারীকে অন্যান্য অ্যাপ্লিকেশনের কার্যক্রম থেকে বিচ্ছিন্ন করে একটি গুরুত্বপূর্ণ মেসেজ বা ফর্ম প্রদর্শন করতে ব্যবহৃত হয়, যেখানে ব্যবহারকারীকে একে একে প্রতিক্রিয়া জানাতে হয়। Confirmation Boxes সাধারণত ব্যবহারকারীকে একটি সিদ্ধান্ত নিতে প্রম্পট করতে ব্যবহৃত হয়, যেমন "আপনি কি ডিলিট করতে চান?" বা "আপনি কি সেভ করতে চান?"।

এখানে ExtJS তে Modal Dialog এবং Confirmation Boxes তৈরি করার পদ্ধতি দেখানো হবে।

১. Modal Dialog

Modal Dialog হলো এমন একটি ডায়ালগ বক্স যা অ্যাপ্লিকেশনের অন্যান্য অংশের উপর লেগে থাকে, অর্থাৎ, এটি যখন পর্যন্ত বন্ধ না করা হয়, তখন পর্যন্ত ব্যবহারকারী অন্য কোনো কার্যক্রম করতে পারে না। এটি সাধারণত গুরুত্বপূর্ণ মেসেজ বা ফর্ম উপস্থাপনের জন্য ব্যবহৃত হয়।

Modal Dialog তৈরি করা:

উদাহরণ:

Ext.create('Ext.window.Window', {
    title: 'Modal Dialog Example',
    width: 300,
    height: 200,
    layout: 'fit',
    modal: true, // Modal dialog
    items: {
        xtype: 'panel',
        html: 'This is a modal dialog. Please interact with it!'
    },
    buttons: [
        {
            text: 'OK',
            handler: function() {
                Ext.Msg.alert('Action', 'You clicked OK!');
            }
        },
        {
            text: 'Cancel',
            handler: function() {
                Ext.Msg.alert('Action', 'You clicked Cancel!');
            }
        }
    ]
}).show();

কী কোড বুঝানো হচ্ছে:

• modal: true: এটি ডায়ালগ বক্সকে মোডাল বানায়, অর্থাৎ ইউজার অন্য কিছু করতে পারবে না যতক্ষণ না তারা ডায়ালগ বক্সটি বন্ধ করে।
• buttons: এখানে দুইটি বাটন দেওয়া হয়েছে, একটির মাধ্যমে OK ক্লিক করলে একটি মেসেজ প্রদর্শিত হবে এবং অন্যটির মাধ্যমে Cancel ক্লিক করলে আরেকটি মেসেজ প্রদর্শিত হবে।
• layout: 'fit': এটি ডায়ালগ বক্সের মধ্যে একটি প্যানেল ফিট করে।

২. Confirmation Box

Confirmation Box হল একটি ডায়ালগ বক্স যা সাধারণত ব্যবহারকারীকে একটি ক্রিয়া বা সিদ্ধান্ত নিতে প্রম্পট করে। যেমন: "আপনি কি নিশ্চিত যে আপনি এই তথ্য মুছে ফেলতে চান?"

Confirmation Box তৈরি করা:

উদাহরণ:

Ext.Msg.confirm('Confirm', 'Are you sure you want to delete this item?', function(choice) {
    if (choice === 'yes') {
        Ext.Msg.alert('Action', 'Item deleted!');
    } else {
        Ext.Msg.alert('Action', 'Item not deleted!');
    }
});

কী কোড বুঝানো হচ্ছে:

• Ext.Msg.confirm: এটি একটি কনফার্মেশন বক্স তৈরি করে যা দুটি অপশন (Yes/No) প্রদর্শন করে।
• choice === 'yes': এখানে, যদি ব্যবহারকারী 'Yes' বাটন ক্লিক করেন, তবে একটি মেসেজ "Item deleted!" দেখানো হবে, আর যদি 'No' ক্লিক করেন, তবে "Item not deleted!" দেখানো হবে।
• Ext.Msg.alert: এটি সাধারণ একটি মেসেজ ডায়ালগ তৈরি করে যা ব্যবহারকারীকে দেখানো হয়।

৩. অন্যান্য Dialog এবং Message Boxes

Information Message Box

একটি সাধারণ মেসেজ বক্স যা ইউজারকে তথ্য দেখায়।

উদাহরণ:

Ext.Msg.alert('Information', 'This is an information message!');

Error Message Box

এটি একটি ত্রুটি বার্তা প্রদর্শন করার জন্য ব্যবহৃত হয়।

উদাহরণ:

Ext.Msg.alert('Error', 'An error occurred while processing your request.');

Warning Message Box

এটি সতর্কবার্তা (Warning) প্রদর্শন করে।

উদাহরণ:

Ext.Msg.alert('Warning', 'Are you sure you want to continue?');

Modal Dialog এবং Confirmation Box এর মধ্যে পার্থক্য

সারাংশ

• Modal Dialog: একটি পপ-আপ উইন্ডো যা ইউজারকে অন্য কোনো কার্যক্রম করতে দেয় না যতক্ষণ না তারা ডায়ালগ বক্সটি বন্ধ করে।
• Confirmation Box: একটি সরল প্রম্পট যা ব্যবহারকারীকে একটি সিদ্ধান্ত নিতে বলে (যেমন, "আপনি কি নিশ্চিত?").
• Message Boxes: সাধারণত Info, Error, এবং Warning মেসেজ দেখানোর জন্য ব্যবহৃত হয়।

ExtJS এ Modal Dialog এবং Confirmation Boxes তৈরি করা খুবই সহজ এবং অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে। এগুলি সাধারণত ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন এবং সিদ্ধান্ত গ্রহণে সহায়তা করে।

ExtJS তে Window কম্পোনেন্ট ব্যবহার করে আপনি কাস্টম ডায়ালগ বক্স বা পপ-আপ উইন্ডো তৈরি করতে পারেন, যা ইউজারের সাথে ইন্টারঅ্যাকশন করার জন্য উপযুক্ত। উইন্ডো কম্পোনেন্টে কাস্টম কনফিগারেশন এবং ইভেন্টস ব্যবহার করে আপনাকে আরো কাস্টমাইজড এবং ইন্টারঅ্যাকটিভ উইন্ডো তৈরি করতে সাহায্য করে।

এখানে Custom Window Configuration এবং Events এর মাধ্যমে কিভাবে ExtJS উইন্ডো তৈরি করা যায় এবং কাস্টমাইজ করা যায়, তা ব্যাখ্যা করা হয়েছে।

১. Custom Window Configuration

একটি কাস্টম উইন্ডো তৈরি করার জন্য, Ext.window.Window ক্লাস ব্যবহার করা হয়। উইন্ডো কম্পোনেন্টের কনফিগারেশন সঠিকভাবে সেট করতে পারে, যেমন উইন্ডোর আকার, শিরোনাম, ইন্টারঅ্যাকশন অপশন, ইত্যাদি।

কাস্টম উইন্ডো কনফিগারেশন উদাহরণ:

Ext.create('Ext.window.Window', {
    title: 'Custom Window',
    width: 400,
    height: 300,
    layout: 'fit', // উইন্ডোর মধ্যে যে কন্টেন্ট থাকবে তা ফিট করবে
    modal: true, // উইন্ডো মডাল হওয়া মানে, ব্যাকগ্রাউন্ড ইন্টারঅ্যাকশন নিষ্ক্রিয় হবে
    closable: true, // উইন্ডো বন্ধ করার জন্য ক্লোজ বাটন থাকবে
    draggable: true, // উইন্ডো ড্র্যাগ করা যাবে
    resizable: true, // উইন্ডো রিসাইজ করা যাবে
    items: [{
        xtype: 'panel',
        html: 'This is a custom window content'
    }],
    listeners: {
        // উইন্ডো খোলার সময় একটি ইভেন্ট
        show: function() {
            console.log('Window is shown!');
        },
        // উইন্ডো বন্ধ করার সময় ইভেন্ট
        close: function() {
            console.log('Window is closed!');
        }
    }
}).show();

কনফিগারেশন ব্যাখ্যা:

• title: উইন্ডোর শিরোনাম।
• width এবং height: উইন্ডোর আকার।
• layout: উইন্ডোর লেআউট। এখানে fit ব্যবহার করা হয়েছে, যাতে উইন্ডোর মধ্যে থাকা কন্টেন্ট স্বয়ংক্রিয়ভাবে ফিট হয়ে যায়।
• modal: উইন্ডোটি মডাল হবে, যার মানে হল যে, ব্যাকগ্রাউন্ডের সাথে ইন্টারঅ্যাকশন বন্ধ হবে যতক্ষণ না উইন্ডোটি বন্ধ করা হয়।
• closable: উইন্ডোর উপর একটি ক্লোজ বাটন থাকবে, যা উইন্ডো বন্ধ করার জন্য ব্যবহৃত হবে।
• draggable: উইন্ডোটি ড্র্যাগ করা যাবে।
• resizable: উইন্ডোটি রিসাইজ করা যাবে।
• items: উইন্ডোর ভিতরের কন্টেন্ট যা এখানে একটি প্যানেল আকারে রয়েছে, এবং এর মধ্যে HTML কনটেন্ট রয়েছে।

২. Events with Windows

ExtJS উইন্ডো কম্পোনেন্টের সাথে ইভেন্ট হ্যান্ডলিং সহজ করে তোলে। বিভিন্ন ধরনের ইভেন্ট রয়েছে যা উইন্ডোতে ব্যবহারকারীর ইন্টারঅ্যাকশন অনুযায়ী কার্যকরী হবে। উইন্ডোর সাধারণ ইভেন্টগুলি হল show, hide, close, resize, ইত্যাদি।

উইন্ডো ইভেন্ট উদাহরণ:

Ext.create('Ext.window.Window', {
    title: 'Custom Window with Events',
    width: 400,
    height: 300,
    layout: 'fit',
    modal: true,
    items: [{
        xtype: 'panel',
        html: 'Content inside the custom window'
    }],
    listeners: {
        // উইন্ডো শো হওয়ার পর ইভেন্ট
        show: function(window) {
            console.log('The window is now visible!');
        },
        // উইন্ডো হাইড হওয়ার পর ইভেন্ট
        hide: function() {
            console.log('The window is now hidden!');
        },
        // উইন্ডো বন্ধ হওয়ার পর ইভেন্ট
        close: function() {
            console.log('The window is being closed!');
        },
        // উইন্ডো রিসাইজ হওয়ার পর ইভেন্ট
        resize: function(window, width, height) {
            console.log('The window has been resized to ' + width + ' x ' + height);
        }
    }
}).show();

এখানে ব্যবহৃত ইভেন্টগুলির ব্যাখ্যা:

• show: উইন্ডোটি দেখানোর পর ইভেন্টটি ট্রিগার হয়।
• hide: উইন্ডোটি হাইড হওয়ার পর ইভেন্টটি ট্রিগার হয়।
• close: উইন্ডোটি বন্ধ হওয়ার সময় ইভেন্টটি ট্রিগার হয়।
• resize: উইন্ডোটি রিসাইজ হওয়ার পর ইভেন্টটি ট্রিগার হয়, এবং রিসাইজড আকারের নতুন প্রস্থ এবং উচ্চতা প্যারামিটার হিসেবে পাঠানো হয়।

৩. Dynamic Window Creation and Events

ExtJS তে উইন্ডো কম্পোনেন্ট ডায়নামিকভাবে তৈরি করার সময় আপনি Ext.create() মেথড ব্যবহার করে উইন্ডো তৈরি করতে পারেন, এবং তার সাথে ইভেন্টগুলোকে কাস্টমাইজ করতে পারেন।

ডায়নামিক উইন্ডো এবং ইভেন্ট হ্যান্ডলার:

var win = Ext.create('Ext.window.Window', {
    title: 'Dynamic Window',
    width: 300,
    height: 200,
    layout: 'fit',
    modal: true,
    items: [{
        xtype: 'panel',
        html: 'This window is created dynamically.'
    }]
});

// উইন্ডো দেখানোর জন্য
win.show();

// উইন্ডো বন্ধ করার জন্য
setTimeout(function() {
    win.close();
}, 5000);  // 5 সেকেন্ড পর উইন্ডো বন্ধ হবে

এখানে, উইন্ডোটি প্রথমে ডায়নামিকভাবে তৈরি করা হচ্ছে এবং তারপর ৫ সেকেন্ড পরে এটি বন্ধ হয়ে যাবে। এটি উইন্ডো বন্ধ করার জন্য একটি setTimeout ফাংশন ব্যবহার করে।

৪. Custom Window with Form and Submit Event

আপনি উইন্ডোর ভিতরে একটি ফর্ম যুক্ত করতে পারেন এবং ফর্ম সাবমিট করার জন্য ইভেন্ট হ্যান্ডলার তৈরি করতে পারেন।

উইন্ডো ফর্ম এবং সাবমিট ইভেন্ট:

Ext.create('Ext.window.Window', {
    title: 'Form Window',
    width: 300,
    height: 200,
    layout: 'fit',
    modal: true,
    items: [{
        xtype: 'form',
        bodyPadding: 10,
        items: [{
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            allowBlank: false
        }],
        buttons: [{
            text: 'Submit',
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    Ext.Msg.alert('Form Submitted', 'Username: ' + form.getValues().username);
                } else {
                    Ext.Msg.alert('Error', 'Please fill out the form');
                }
            }
        }]
    }]
}).show();

এখানে, একটি ফর্ম উইন্ডো তৈরি করা হয়েছে যার মধ্যে একটি textfield (ইউজারনেম) রয়েছে এবং একটি Submit বাটন যুক্ত করা হয়েছে। handler ইভেন্টের মাধ্যমে সাবমিট করলে ইউজারের ইনপুট ভ্যালু পপ-আপে প্রদর্শিত হবে।

সারাংশ

1. Custom Window Configuration: ExtJS তে উইন্ডো কম্পোনেন্ট কনফিগার করতে title, width, height, modal, closable, draggable, ইত্যাদি কনফিগারেশন প্রপার্টি ব্যবহার করা যায়।
2. Events: ExtJS উইন্ডোতে ইভেন্ট হ্যান্ডলিং যেমন show, hide, close, resize ইত্যাদি ব্যবহার করা যেতে পারে।
3. Dynamic Window Creation: Ext.create() মেথড ব্যবহার করে ডায়নামিকভাবে উইন্ডো তৈরি করা যায় এবং তার সাথে ইভেন্ট হ্যান্ডলার যুক্ত করা যায়।
4. Form with Submit Event: উইন্ডোতে ফর্ম যুক্ত করা যায় এবং submit ইভেন্টের মাধ্যমে ইউজারের ইনপুট প্রসেস করা যায়।

ExtJS উইন্ডো কম্পোনেন্ট খুবই শক্তিশালী এবং কাস্টমাইজেবল, যা আপনাকে ইন্টারঅ্যাকটিভ এবং ডায়নামিক ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে।

ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক, যা ইউজার ইন্টারফেসের জন্য বিভিন্ন Window Animations এবং Transitions সাপোর্ট করে। এগুলি অ্যাপ্লিকেশনটির ইন্টারঅ্যাকশনকে আরো মসৃণ এবং আকর্ষণীয় করে তোলে, যাতে ইউজাররা ভাল অভিজ্ঞতা পায়। আপনি উইন্ডো, প্যানেল, গ্রিড এবং অন্যান্য কম্পোনেন্টে অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করতে পারেন।

ExtJS Window Animations এবং Transitions কী?

• Window Animations: একটি উইন্ডো খোলার বা বন্ধ করার সময় স্লাইড, ফেড, জুম বা অন্যান্য অ্যানিমেশন ইফেক্ট যোগ করা হয়। এগুলি সাধারণত ইউজার ইন্টারফেসে প্রাণ এনে দেয় এবং অ্যাপ্লিকেশনটির অভিজ্ঞতা উন্নত করে।
• Transitions: এটি বিশেষ অ্যানিমেশন যা এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে বা ভিউতে পরিবর্তন করার সময় ব্যবহৃত হয়। এটি সরাসরি ভিউ এবং কন্টেন্ট পরিবর্তন করতে সাহায্য করে।

ExtJS এ Window Animations এবং Transitions এর ব্যবহার

১. Window Animations

ExtJS-এ উইন্ডো অ্যানিমেশন সাধারণত Ext.window.Window কম্পোনেন্টের সাথে যুক্ত থাকে। window এর মাধ্যমে আপনি স্লাইড, ফেড, জুম, বা অন্যান্য অ্যানিমেশন প্রয়োগ করতে পারেন।

Animation ব্যবহার করার উদাহরণ:

Ext.create('Ext.window.Window', {
    title: 'Animated Window',
    width: 300,
    height: 200,
    layout: 'fit',
    items: [{
        xtype: 'panel',
        html: 'This is a window with animation.'
    }],
    animateTarget: Ext.getBody(), // আনার জন্য একটি টার্গেট
    listeners: {
        show: function(window) {
            // উইন্ডো শো হওয়ার সময় একটি অ্যানিমেশন
            window.el.animate({
                to: {
                    opacity: 1,
                    left: 100,
                    top: 100
                },
                duration: 1000
            });
        },
        hide: function(window) {
            // উইন্ডো হাইড হওয়ার সময় অ্যানিমেশন
            window.el.animate({
                to: {
                    opacity: 0,
                    left: 0,
                    top: 0
                },
                duration: 500
            });
        }
    }
}).show();

• animateTarget: এটি নির্দেশ করে যে কোথা থেকে উইন্ডোটি স্লাইড হবে। এখানে Ext.getBody() টার্গেট হিসাবে ব্যবহার করা হয়েছে।
• el.animate: উইন্ডোটি শো হওয়ার বা হাইড হওয়ার সময় অ্যানিমেশন প্রক্রিয়া চালানো হয়।

২. Window Slide In/Out

আপনি উইন্ডো স্লাইড ইন বা স্লাইড আউট করতে পারেন, যা একটি প্রচলিত অ্যানিমেশন প্রক্রিয়া।

Slide In/Out Example:

Ext.create('Ext.window.Window', {
    title: 'Slide In Window',
    width: 300,
    height: 200,
    layout: 'fit',
    items: [{
        xtype: 'panel',
        html: 'This window slides in and out!'
    }],
    listeners: {
        afterrender: function(window) {
            window.el.setOpacity(0);
            window.el.animate({
                to: {
                    opacity: 1,
                    left: '100px'  // স্লাইড করার জন্য নির্ধারণ
                },
                duration: 1000
            });
        },
        hide: function(window) {
            window.el.animate({
                to: {
                    opacity: 0,
                    left: '-300px'  // স্লাইড আউট করার জন্য নির্ধারণ
                },
                duration: 500
            });
        }
    }
}).show();

এই কোডে, উইন্ডোটি একটি স্লাইড ইন অ্যানিমেশনের মাধ্যমে প্রদর্শিত হবে এবং একটি স্লাইড আউট অ্যানিমেশনের মাধ্যমে লুকানো হবে।

৩. Transitions

Transitions বিশেষত মেনু, প্যানেল, বা পেজ ট্রানজিশন ঘটানোর জন্য ব্যবহৃত হয়, যেখানে একটি ভিউ থেকে অন্য ভিউতে মসৃণ পরিবর্তন ঘটে।

Transition Example:

Ext.create('Ext.container.Viewport', {
    layout: 'card',
    items: [{
        xtype: 'panel',
        html: 'This is the first panel.',
        title: 'Panel 1'
    }, {
        xtype: 'panel',
        html: 'This is the second panel.',
        title: 'Panel 2'
    }],
    listeners: {
        afterrender: function(viewport) {
            viewport.getLayout().setActiveItem(1); // Panel 2 তে ট্রানজিশন
        }
    }
});

এখানে layout: 'card' ব্যবহার করা হয়েছে, যা বিভিন্ন প্যানেলের মধ্যে স্লাইডিং ট্রানজিশন প্রভাব তৈরি করবে।

৪. Zoom In/Out Transition

Zoom Transition অনেক সময় ডেটা বা কন্টেন্ট ভিউ পরিবর্তনের জন্য ব্যবহৃত হয়। এটি একটি ভিউকে বড় বা ছোট করে ডায়নামিকভাবে ট্রানজিশন করে।

Zoom In/Out Example:

Ext.create('Ext.window.Window', {
    title: 'Zoom In Window',
    width: 300,
    height: 200,
    layout: 'fit',
    items: [{
        xtype: 'panel',
        html: 'This window will zoom in and out!'
    }],
    listeners: {
        afterrender: function(window) {
            window.el.setOpacity(0);
            window.el.animate({
                to: {
                    opacity: 1,
                    scale: 1.5
                },
                duration: 1000
            });
        },
        hide: function(window) {
            window.el.animate({
                to: {
                    opacity: 0,
                    scale: 0.5
                },
                duration: 500
            });
        }
    }
}).show();

এখানে, scale প্রপার্টি ব্যবহার করা হয়েছে যা উইন্ডোর সাইজ পরিবর্তন করতে সাহায্য করে এবং opacity পরিবর্তন করা হয়েছে।

ExtJS এ অন্যান্য Transitions এবং Animations

1. Fade In/Out: কম্পোনেন্ট বা উইন্ডো ফেড ইন বা ফেড আউট হতে পারে।
2. Slide Up/Down: উইন্ডো বা প্যানেল উপরে বা নিচে স্লাইড করা যায়।
3. Rotate: উপাদানকে ঘোরানো (রোটেট) সম্ভব।

সারাংশ

• Window Animations এবং Transitions ব্যবহার করে আপনি একে অপরের মধ্যে ভিজ্যুয়াল ট্রানজিশন এবং মসৃণ অ্যানিমেশন ইফেক্ট যুক্ত করতে পারেন, যা ইউজার এক্সপিরিয়েন্স উন্নত করতে সাহায্য করে।
• ExtJS অ্যানিমেশন এবং ট্রানজিশন কনফিগারেশন প্লাগইন এবং মেথড যেমন animate, transition, slideIn, zoom প্রয়োগ করার জন্য সরবরাহ করে।
• এই কাস্টমাইজেশন আপনাকে আরও ইন্টারঅ্যাকটিভ এবং প্রাণবন্ত ইউজার ইন্টারফেস তৈরি করতে সহায়ক।

ExtJS এর এই অ্যানিমেশন এবং ট্রানজিশন ফিচারগুলো আপনার অ্যাপ্লিকেশনকে আরও প্রফেশনাল এবং ইউজার-ফ্রেন্ডলি করে তোলে।